<template>
	<view class="container">
		<view class="status_bar">
			<view style="margin-left: 3%;" @tap="goBack()"><u-icon name="arrow-leftward" size='24' /></u-icon></view>
			<view style="margin-left: -50upx; font-weight: bold;">从全部标签中添加</view>
			<view style="color: #d54827;margin-right: 30upx; font-weight: 300;" @tap="handleSave()"></view>
		</view>

		<view class="title-box">添加新的标签名字</view>
		<view class="shop-box">
			<view class="box" v-for="(item,index) in userInfo" @click="addqun(item)">{{item.tag_name}}</view>
			<view class="box" @click="addBiaoqian">+新建标签</view>
		</view>
		<view class="title-box" style="margin-top: 30upx;">
			<view>已有标签</view>
		</view>
		<view class="shop-box">
			<view class="box" v-for="(item,index) in userInfos">{{item.tag_name}}</view>

		</view>
		<u-modal :show="show" :title="title" @confirm="confirmAddLabel" :content='content'>
			<u-search placeholder="请输入标签标题" v-model="tag_name" :showAction="false" searchIconColor="#373737"
				placeholderColor="#bcbcbc"></u-search>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				startX: 0, // 触摸开始的X坐标
				endX: 0, // 触摸结束的X坐标
				threshold: 50, // 设置滑动多少距离后触发返回
				value1: '',
				valueNew: [],
				userInfo: '',
				userInfos: '',
				info: '',
				show: false,
				tag_name: '',
				title: '新建标签',
				content: 'uView的目标是成为uni-app生态最优秀的UI框架',
			}
		},
		onLoad(options) {
			console.log('options', options);
			if (options.groupId) {
				this.info = JSON.parse(options.groupId)
			}
			if (options.user_uid) {
				this.info = {
					'user_uid': options.user_uid
				}
			}
			console.log('user_uid', this.info)
			this.getDetail()
			this.gettag()
			this.gettags()
		},
		methods: {
			addBiaoqian() {
				this.show = true;
			},
			confirmAddLabel() {
				setTimeout(() => {
					if (this.tag_name == "") {

					} else {
						// 1秒后自动关闭
						uni.request({
							url: this.$api.baseUrl + '/api/common/user_tag/add',
							header: {
								'content-type': 'application/json'
							},
							data: {
								user_id: uni.getStorageSync('user_uid'),
								tag_name: this.tag_name
							},
							method: 'POST',
							success: res => {
								console.log('新建res', res);
								// uni.hideLoading()
								if (res.data.code == 0) {
									this.gettag();
								}



								// this.list = res.data;
							},
							fail: res => {
								console.log(res);
							}

						})
					}

					this.show = false;
				}, 100)
			},
			gettag() {
				console.log('获取标签')
				uni.request({
					url: this.$api.baseUrl + '/api/common/user_tag/fetch',
					header: {
						'content-type': 'application/json'
					},
					data: {
						user_id: uni.getStorageSync('user_uid'),
					},
					method: 'POST',
					success: res => {
						console.log(res, 'res');
						// uni.hideLoading()
						if (res.data.code == 0) {
							this.userInfo = res.data.data
						}
						this.userInfo.forEach(item => {
							if (item.tag_name == this.tag_name) {
								console.log('新增的开始添加')
								this.addqun(item)
							}
						})
						console.log(this.list);
						// this.list = res.data;
					},
					fail: res => {
						console.log(res);
					}

				})
			},
			addqun(item) {
				console.log('添加新的标签', String(this.info.user_uid))
				uni.request({
					url: this.$api.baseUrl + '/api/common/user_tag_map/add',
					header: {
						'content-type': 'application/json'
					},
					data: {
						friend_ids: [String(this.info.user_uid)],
						tag_id: item.id
					},
					method: 'POST',
					success: res => {
						console.log('添加标签', res)
						this.gettags()
						// 返回上一页面
						// uni.navigateBack({
						// 	delta: 1 // 返回的页面数，如果小于等于0或大于打开的页面数，则返回到首页。默认值为1，即返回上一页面。
						// });

						// this.gettag() 
					},
					fail: res => {
						console.log(res);
					}

				})
			},
			gettags() {
				uni.request({
					url: this.$api.baseUrl + '/api/user/friend/tag/list',
					header: {
						'content-type': 'application/json'
					},
					data: {
						user_id: uni.getStorageSync('user_uid'),
						friend_id: this.info.user_uid
					},
					method: 'POST',
					success: res => {
						console.log(res, 'res');
						// uni.hideLoading()
						if (res.data.code == 0) {
							this.userInfos = res.data.data
						}
						console.log(this.list);
						// this.list = res.data;
					},
					fail: res => {
						console.log(res);
					}

				})
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},


			confirm(e) {
				console.log(2, '344')
				this.value1 = e
			},
			handleSave() {
				// this.valueNew = this.value1
				this.valueNew.push(this.value1)
				console.log(this.valueNew)
				uni.$emit('update', this.valueNew);
			},
			logout() {
				
				// uni.clearStorageSync()
				uni.MBSocketProvider.closeLocalSocket();
				uni.setStorageSync('loginInfo', {});
				uni.setStorageSync('token', '')
				uni.setStorageSync('user_uid', '')
				uni.setStorageSync('userId', '')
				uni.setStorageSync('user_level', '')
				uni.setStorageSync('nickname', '')
				uni.setStorageSync('user_avatar_file_name', '')
				uni.setStorageSync('loginInfoArr', []);
				this.toPage('/pages/login')
			},
			showEdit() {
				this.groupName = this.group.name
				this.$refs.edit.open()
			},
			cancelEdit() {
				this.$refs.edit.close()
			},
			editAction() {
				if (this.$validate.isNull(this.groupName)) return
				this.$util.loading('保存中')
				uni.request({
					method: 'POST',
					url: this.$api.updateGroupName,
					data: {
						groupId: this.groupId,
						userId: this.userId,
						name: this.groupName
					},
					header: this.$util.getHeader(),
					success: res => {
						uni.hideLoading()
						this.$util.toast(res.data.msg)
						if (!res.data.code) {
							this.$refs.edit.close()
							this.group.name = this.groupName
							uni.setStorageSync('groupName', this.groupName)
						}
					},
					fail: res => {
						uni.hideLoading()
						this.$util.toast('保存失败')
					}
				})
			},
			// 上传头像
			uploadFace() {
				uni.chooseImage({
					count: 1,
					success: chooseRes => {
						const tempFilePaths = chooseRes.tempFilePaths

						this.$util.loading('上传中')
						tempFilePaths.forEach(temp => {
							uni.uploadFile({
								url: this.$api.uploadUserFace,
								filePath: temp,
								formData: {
									groupId: this.groupId,
									userId: this.userId
								},
								name: 'file',
								header: this.$util.getHeader(),
								success: uploadRes => {
									uni.hideLoading()
									if (uploadRes.data.code) return
									let data = JSON.parse(uploadRes.data)
									this.user.face = this.$api.staticPath + data
										.data
									uni.setStorageSync('userFace', this.user.face)
								}
							})
						})
					}
				})
			},
			// 获取信息
			getDetail() {
				this.$util.loading()
				uni.request({
					url: this.$api.getUserInfo,
					data: {
						userId: this.userId
					},
					header: this.$util.getHeader(),
					success: res => {
						uni.hideLoading()
						this.user = res.data.data
						this.user.face = this.user.face ? this.$api.staticPath + this.user.face : ''
					},
					fail: err => {
						uni.hideLoading()
						this.$util.toast('获取失败')
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100%;
	}

	.box {
		background-color: #a3a0a0;
		border-radius: 10px;
		padding: 4px;
		margin-right: 10px;
		float: left;
		margin-top: 4px;
		;
	}

	.status_bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 50upx;
	}

	.status_bar,
	.head {
		background-color: #fff;
		height: 160upx;

		.face {
			width: 160upx;
			height: 160upx;
			border-radius: 10upx;
		}

		.info-name {
			font-size: 40upx;
			font-weight: bold;
		}

		.info-num {
			// width: 56upx;
			padding: 2upx 30upx;
			background: #f0f4f7;
			border-radius: 30upx;
			margin-top: 21upx;
		}

		.copybtns {
			color: #4457a4;
			margin-top: 21upx;
		}
	}


	.shop-box {
		width: 96%;
		// margin-left: 4%;
		// background-color: #f8f9fb;
		margin-top: 20upx;
		border-radius: 20upx;
		padding: 10upx 30upx;
		color: #2e2e2e;
		font-weight: 300;

		image {
			width: 70upx;
			height: 70upx;
			padding: 10upx 28upx 0upx 10upx;

		}

		::v-deep.u-textarea[data-v-81cd9d32],
		.uni-textarea-textarea {
			background-color: #f8f9fb;
		}

		::v-deep.u-input__content__clear {
			background-color: #1a76f1;
		}
	}

	.title-box {
		font-weight: 300;
		width: 92%;
		margin-left: 4%;
		display: inline-block;
	}

	.biaoqian-box1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* 允许Flex项目换行 */
		flex-wrap: wrap;
		padding: 10px;

	}

	.biaoqian-box {
		padding: 10upx 28upx;
		background: #d54827;
		border-radius: 30upx;
		color: #fff;
		font-weight: 300;
		margin-left: 20upx;
		//flex: 1;
		margin: 5px;
		text-align: center;

	}

	.icon-title {
		color: #d54827;
		font-weight: bold;
		margin-right: 20upx;
		margin-left: 36upx;
	}
</style>